import { Graph } from '@antv/x6';
import {
  NODE_WIDTH,
  NODE_HEIGHT,
  NODE_TYPE_START,
  NODE_TYPE_END,
  NODE_TYPE_INTERMEDIATE_END,
  ConditionTypeEnum,
  NodeTypeEnum,
} from '../constant/index.js';
import { getIconByType, getStartIcon, getEndIcon } from './icons.js';

const DEFAULT_BODY = {
  fill: 'transparent',
  stroke: 'none',
  strokeWidth: 0,
  rx: 0,
  ry: 0,
};

const TYPE_COLORS = {
  [ConditionTypeEnum.THEN]: '#4f6ef7',
  [ConditionTypeEnum.WHEN]: '#845ef7',
  [ConditionTypeEnum.SWITCH]: '#ffa94d',
  [ConditionTypeEnum.IF]: '#2f9e44',
  [ConditionTypeEnum.FOR]: '#1098ad',
  [ConditionTypeEnum.WHILE]: '#5c7cfa',
  [ConditionTypeEnum.ITERATOR]: '#12b886',
  [ConditionTypeEnum.CATCH]: '#f03e3e',
  [ConditionTypeEnum.AND]: '#9775fa',
  [ConditionTypeEnum.OR]: '#fcc419',
  [ConditionTypeEnum.NOT]: '#ff922b',
  [ConditionTypeEnum.CHAIN]: '#7048e8',
  [NodeTypeEnum.COMMON]: '#3b5bdb',
};

export const registerBasicShapes = () => {
  Graph.registerNode(
    NODE_TYPE_START,
    {
      inherit: 'circle',
      width: 36,
      height: 36,
      markup: [
        { tagName: 'circle', selector: 'body' },
        { tagName: 'image', selector: 'icon' },
      ],
      attrs: {
        body: {
          fill: 'transparent',
          stroke: 'none',
          r: 18,
        },
        icon: {
          width: 32,
          height: 32,
          refX: 0.5,
          refY: 0.5,
          x: -16,
          y: -16,
          'xlink:href': getStartIcon(),
        },
      },
    },
    true,
  );

  Graph.registerNode(
    NODE_TYPE_END,
    {
      inherit: 'circle',
      width: 36,
      height: 36,
      markup: [
        { tagName: 'circle', selector: 'body' },
        { tagName: 'image', selector: 'icon' },
      ],
      attrs: {
        body: {
          fill: 'transparent',
          stroke: 'none',
          r: 18,
        },
        icon: {
          width: 32,
          height: 32,
          refX: 0.5,
          refY: 0.5,
          x: -16,
          y: -16,
          'xlink:href': getEndIcon(),
        },
      },
    },
    true,
  );

  Graph.registerNode(
    NODE_TYPE_INTERMEDIATE_END,
    {
      inherit: 'circle',
      width: 24,
      height: 24,
      attrs: {
        body: {
          fill: '#ced4da',
          stroke: '#adb5bd',
        },
      },
    },
    true,
  );

  const baseConfig = {
    inherit: 'rect',
    width: NODE_WIDTH,
    height: NODE_HEIGHT,
    markup: [
      {
        tagName: 'rect',
        selector: 'body',
      },
      {
        tagName: 'image',
        selector: 'icon',
      },
    ],
    attrs: {
      body: { ...DEFAULT_BODY },
      icon: {
        // 图标占满整个节点区域，留小边距
        width: NODE_WIDTH - 4,
        height: NODE_HEIGHT - 4,
        refX: 0.5,
        refY: 0.5,
        x: -(NODE_WIDTH - 4) / 2,
        y: -(NODE_HEIGHT - 4) / 2,
      },
    },
  };

  const registerRect = (name) => {
    const iconUrl = getIconByType(name);
    Graph.registerNode(
      name,
      {
        ...baseConfig,
        attrs: {
          ...baseConfig.attrs,
          body: {
            ...DEFAULT_BODY,
          },
          icon: {
            ...baseConfig.attrs.icon,
            'xlink:href': iconUrl,
          },
        },
      },
      true,
    );
  };

  [
    ConditionTypeEnum.THEN,
    ConditionTypeEnum.WHEN,
    ConditionTypeEnum.SWITCH,
    ConditionTypeEnum.IF,
    ConditionTypeEnum.FOR,
    ConditionTypeEnum.WHILE,
    ConditionTypeEnum.ITERATOR,
    ConditionTypeEnum.CATCH,
    ConditionTypeEnum.AND,
    ConditionTypeEnum.OR,
    ConditionTypeEnum.NOT,
    ConditionTypeEnum.CHAIN,
    NodeTypeEnum.COMMON,
    NodeTypeEnum.VIRTUAL,
  ].forEach(registerRect);
};

